$img: url("https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx2.sinaimg.cn%2Fmw690%2F5f808b33gy1gtl1ija5wcj20kk0ms435.jpg&refer=http%3A%2F%2Fwx2.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633769957&t=81600064a5c7622883a7fb71ed4700a9");
.animate {
  color: red;
  padding: 30px;
  background: wheat;
  display: flex;
  flex-direction: column;
  gap: 20px;
  .border {
    height: 100px;
    width: 100px;
    border: 20px solid #888888;
    /* 水平阴影的位置(必) 垂直阴影的位置(必) 模糊距离 阴影的大小 阴影的颜色 从外层的阴影（开始时）改变阴影内侧阴影(值inset) */
    box-shadow: 10px 10px 5px 5px #888888;
    border-image: $img;
    border-image-slice: 20%; // 边界向内偏移图像会被拉伸
    border-image-width: 20px; // 边界上图片的显示宽度
    border-image-outset: 0; // 外边框和图片的距离
    // border-image-repeat: round;图像边界是否应重复（repeat）、拉伸（stretch）或铺满（round）
  }
  .borderRadius {
    // 左上 右上 右下 左下
    border-radius: 10px 20px 30px 40px;
    height: 100px;
    width: 100px;
    border: 1px solid #888888;
  }
  .borderBackground {
    height: 100px;
    width: 100px;
    background-image: $img;
    border: 30px solid #888888;
    padding: 30px;
    background-size: 100px 100px;
    background-clip: content-box; // 背景的绘制区域padding-box|border-box|content-box分别是根据padding，border，content
    background-origin: content-box; // 背景图片的定位区域padding-box|border-box|content-box
    background-position: 10px 10px; // 位置
    background-repeat: no-repeat; // 图片状态
  }
  .Gradients {
    height: 100px;
    width: 100px;
    border: 1px solid #888888;
    // 线性渐变 方向（也可以是角度） 起点颜色 设置宽度（可选） 过程颜色(多个) 终点颜色
    // background-image: linear-gradient(/*to right bottom*/ 155deg, red 10%, green, blue 20%);
    // 重复线性
    // background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
    // 径向渐变 形状及渐变大小（circle 表示圆形，ellipse 表示椭圆形宽高不同有效，大小有farthest-side closest-side closest-corner farthest-corner） 颜色
    background-image: radial-gradient(
      circle farthest-side at 60% 55%,
      red,
      yellow,
      green
    );
    // 重复径向渐变
    // background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
  }
  .text {
    width: 50px;
    // 水平阴影的位置(必) 垂直阴影的位置(必) 模糊距离 阴影颜色
    text-shadow: 5px 5px 2px #ff0000;
    white-space: nowrap;
    // clip修剪文本 ellipsis省略号 (配合overflow: hidden)
    text-overflow: ellipsis;
    overflow: hidden;
    // normal 浏览器默认，break-all可以切断单词，keep-all只能在空格或连字符切换
    word-break: keep-all;
  }
  .css2D {
    height: 100px;
    width: 100px;
    background: blue;
    animation: css2DAnimate 2s;

    transform-origin: 0px 0px; // 旋转的点
  }
  .css3D {
    height: 100px;
    width: 100px;
    margin-left: 200px;
    // 初始位置一般是x轴，y轴，z轴矢量为1
    // 位置情况为z轴箭头指向‘你’垂直屏幕平面看上去就是一个点
    // y轴和x轴就如平时看到的那样在屏幕里边的垂直方向和水平方向
    animation: css3DAnimate 2s infinite /* 播放次数 */ ease-in-out;
    animation-delay: 0.5s; // 动画延迟
    animation-direction: reverse; // 反向播放
    animation-fill-mode: forwards; // 动画结束时要应用的样式none|forwards(使用动画停止的样式)|backwards(上一个动作的样式)|both
    animation-play-state: running; // paused|running控制动画开始和暂停
    transform-style: preserve-3d; // flat（2d）|preserve-3d（3d）保留子元素的3d旋转不然会图层合到一起起不到3d效果
    position: relative;
    transform-origin: 120% 40%; // 旋转元素的基点位置（旋转中心）
    & > div {
      height: 100px;
      width: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 60px;
      position: absolute;
      color: white;
    }
    .font {
      background: rgba(blue, 0.5);
      transform: translateZ(50px); // 沿着Y轴提升50个px到3d画面的中心
    }
    .back {
      background: rgba(pink, 0.5);
      transform: rotateY(180deg) translateZ(50px); // rotateY沿着Y轴转动到后面
    }
    .right {
      background: rgba(red, 0.5);
      transform: rotateY(90deg) translateZ(50px); // 转到右边
    }
    .left {
      background: rgba(green, 0.5);
      transform: rotateY(-90deg) translateZ(50px); // 转到左边
    }
    .top {
      background: rgba(yellow, 0.5);
      transform: rotateX(90deg) translateZ(50px); // rotateX转到上面
    }
    .bottom {
      background: rgba(black, 0.5);
      transform: rotateX(-90deg) translateZ(50px); // rotateX转到下面
    }
  }
  @keyframes css2DAnimate {
    from {
      // 旋转 缩放(x宽度倍数,y宽度倍数) 位移（x轴 y轴 也可以直接写数字） 倾斜（x轴 y轴）
      // 注意这边旋转和缩放的先后顺序不同效果不同
      transform: rotate(0deg) translate(0px, 0px) scale(1) skew(0deg, 0deg);
    }
    to {
      transform: rotate(270deg) translate(50px, 50px) scale(0.4)
        skew(45deg, 45deg);
    }
  }
  @keyframes css3DAnimate {
    from {
      transform: rotateZ(0deg) rotateX(-45deg) rotateY(-45deg)
        rotate3d(1, 1, 1, 0);
    }
    to {
      transform: rotateZ(0deg) rotateX(-45deg) rotateY(-45deg)
        rotate3d(1, 1, 1, 300deg);
    }
  }
  .transition{
    height: 100px;
    width: 100px;
    background: red;
    transition: width 2s ease-in-out 0.5s, height 2s ease-in-out 0.5s;
    &:hover{
      height: 50px;
      width: 50px;
    }
  }
  .column{
    color: white;
    width: 300px;
    height: 200px;
    column-count: 3;
    column-width: 90px;
    column-gap: 10px;
    column-rule: 1px solid black;
    column-fill: balance;
    p{
      column-span: 2;
    }
  }
  .userPanel{
    width: 100px;
    height: 100px;
    resize: both; // 用户界面可编辑大小要配合overflow:auto;使用
    overflow:auto;
    border: 1px solid #333;
    outline:2px solid red;
    outline-offset:15px; // 外边界
  }
  .filter{
    width: 100px;
    height: 100px;
    background: blue;
    // filter: blur(4px); // 模糊
    // filter: sepia(100%);
    filter: hue-rotate(180deg);
  }
  .boxSizing{
    color: #fff;
    height: 100px;
    width: 100px;
    background: red;
    box-sizing: content-box;
    padding: 10px;
  }
}
.float {
  background: red;
  display: flex;
  .children {
    background: green;
    height: 100px;
    width: 100px;
    float: left;
  }
}
